<template>
    <div>
        <br/>
        <br/>
        <el-form ref="route" :model="ltname" >
            <el-form-item label="用户账户" :label-width="formLabelWidth">
                <el-input placeholder="请输入内容" v-model="ltname.phone" class="input-with-select" clearable>
                    <el-button slot="append" @click="listByRoute('phone')" icon="el-icon-search"></el-button>
                </el-input>
            </el-form-item>
        </el-form>

        <el-table :data="data"
                  tooltip-effect="dark"
                  style="width: 100%">
            <el-table-column prop="tid" label="编号" width="300px"></el-table-column>
            <el-table-column prop="phone" label="用户账号"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="170px"></el-table-column>
            <el-table-column prop="updateDate" label="修改时间" width="170px"></el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.state === 1">用户正常</el-tag>
                    <el-tag type="danger" v-if="scope.row.state === 0">用户异常</el-tag>
                </template>
            </el-table-column>

        </el-table>
        <br/>
        <div class="page">
            <el-pagination
                background
                center
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="pageList"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list.length">
                <!--           layout加上 sizes,    :page-sizes="[6, 7, 8, 9 ,10]"-->
            </el-pagination>
        </div>
    </div>


</template>

<script>
    export default {
        name: "Traveller",
        data() {
            return {
                // 当前页
                currentPage: 1,
                // 每页显示 5 条数据
                pageSize: 5,
                // 每页显示多少条数据的数组
                pageList: [5,10,15,20],
                list: [],
                ltname:{
                    phone:null
                },
                formLabelWidth: '120px',
            }
        },

        created() {
            this.$http.post("account/account/selectAll").then(data => {
                this.list = data.data;
            })
        },
        computed: {
            // 计算分页所显示的数据
            data() {
                if(this.list != null){
                    // 使用 splice 方法从第几个开始取出多少条数据
                    return this.list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                }

            }
        },
        methods: {
            // 修改当前页显示 多少数据
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
            },
            // 修改当前是 第几页
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            listByRoute(){
                if(this.ltname.phone == null){
                    this.$http.post("account/account/selectAll").then(data => {
                        this.list = data.data;
                    })
                    this.reload();
                }else {
                    this.$http.post("account/account/listByPhone",this.ltname).then(data => {
                        this.list = data.data;
                    })
                }
            }
        }

    }
</script>

<style scoped>

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

</style>
